<template>
  <!-- 用户授权二合一 -->
  <div id="UserAuthorization">
    <Breadcrumb content="用户管理" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="用户模式">
          <!-- :isChildren="isChildren" -->
          <UserManage />
        </el-tab-pane>
        <el-tab-pane label="授权模式">
          <UserAuth />
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/api/user/" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import UserManage from './UserManage.vue'; //用户模式
import UserAuth from './UserAuth.vue'; //授权模式
import LogInfo from '@/components/LogInfo.vue'; //日志

let isChildren = ref(true);
</script>

<style lang="scss" scoped>
#UserAuthorization {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
  }

  :deep(.el-tabs) {
    height: 100%;
    border: none;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
    padding: 0;
  }
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.splitpanes) {
    height: 100%;
  }
}
</style>
